@import "images";
@import "stars";

.item{
	width:100%;
	height:128px;
	position:relative;
	.thumbnail{
		position:absolute;
		top:0px;
		left:0px;
		width:128px;
		height:100%;
		@extend .image-viewable;
		display:block;
	}
	.details{
		position:absolute;
		top:0px;
		left:150px;
		height:100%;
		width:190px;
		.name{
			font-weight:bold;
			display:block;
		}
		.price,.expiration{
			font-size:13px;
		}
		.expiration,.author{
			font-style:italic;
		}
	}
	.details,.description{
		display:table;
		.container{
			display:table-cell;
			vertical-align:middle;
		}
	}
	.description{
		position:absolute;
		left:350px;
		height:100%;
		top:0px;
	}
	//Use the extra room for the description if we don't have action buttons
	.description:last-child{
		right:2px;
	}
	.description:not(:last-child){
		right:50px;
	}
	.actions{
		position:absolute;
		top:0px;
		width:50px;
		height:100%;
		right:2px;
		input,form,a{
			width:100%;
			text-align:center;
		}
		a{
			display:block;
		}
	}
	margin-bottom:15px;
}
